import { Carousel } from 'antd';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons';
import { useRef } from 'react';

function Banner() {
  const ref = useRef();
  const data = [
    {
      slogan: '这里展示项目特色',
      subSlogan: '这里写项目描述，这里写项目描述',
      image: '/src/assets/login/login.png',
    },
    {
      slogan: '内置了常见问题的解决方案',
      subSlogan: '路由配置，状态管理应有尽有',
      image: '/src/assets/login/login.png',
    },
    {
      slogan: '开箱即用的高质量模板',
      subSlogan: '丰富的的页面模板，覆盖大多数典型业务场景',
      image: '/src/assets/login/login.png',
    },
  ];

  return (
    <div
      className="h-full relative"
      style={{
        width: 550,
        background: 'linear-gradient(163.85deg, #1d2129 0%, #00308f 100%)',
      }}
    >
      <div className="absolute top-4  left-6 flex justify-center space-x-2 text-white">
        <img
          src="/src/assets/images/ico.png"
          className="w-6 h-6"
          alt="UZI Admin"
        />
        <div className="text-lg">UZI Admin</div>
      </div>
      <LeftCircleOutlined
        className="absolute top-1/2 left-4 text-2xl z-50"
        twoToneColor="#647197"
        onClick={() => ref.current.prev()}
      />
      <RightCircleOutlined
        className="absolute top-1/2 right-4 text-2xl z-50"
        twoToneColor="#647197"
        onClick={() => ref.current.next()}
      />
      <Carousel ref={ref}>
        {data.map((item) => (
          <div key={item.image}>
            <div className="h-screen flex flex-col items-center justify-center">
              <div className="text-lg text-white font-medium mb-5">
                {item.slogan}
              </div>
              <div className="text-gray-400">{item.subSlogan}</div>
              <img className="w-80 mt-10" src={item.image} alt="" />
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  );
}
export default Banner;
